<template>
	<div>
		<main-content
			classType="wrapInner"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="form"
					:model="form"
					:inline="true"
					label-width="auto"
					label-suffix=":"
				>
					<el-form-item label="所属商户" prop="merchantId">
						<merchant-select
							v-model="form.merchantId"
							:placeholder="$t('common.select_all')"
						></merchant-select>
					</el-form-item>

					<el-form-item label="会员账号" prop="username">
						<el-input
							v-model.trim="form.username"
							clearable
							maxlength="11"
							size="medium"
						/>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							:loading="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							icon="el-icon-plus"
							size="medium"
							@click="handleAdd"
							v-if="hasPermission('90750056')"
						>
							{{ $t('common.add') }}
						</el-button>
					</el-form-item>
				</el-form>
			</template>
			<template slot="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					:data="tableData"
					style="width: 100%"
					:max-height="tableHeight"
					highlight-current-row
					:header-cell-style="getRowClass"
					class="small-size-table"
				>
					<el-table-column
						prop="username"
						align="center"
						label="会员账号"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.username || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="businessModel"
						align="center"
						label="业务模式"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									businessModelMap[scope.row.businessModel] ||
									'-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="merchantName"
						align="center"
						label="所属商户"
						min-width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.merchantName || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="depositMultiple"
						align="center"
						label="会员存款（客户端）"
						min-width="130"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									scope.row.depositMultiple === 0
										? 0
										: scope.row.depositMultiple || '-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="depositBackMultiple"
						align="center"
						label="会员存款（后台）"
						min-width="120"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									scope.row.depositBackMultiple === 0
										? 0
										: scope.row.depositBackMultiple || '-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="assistDepositMultiple"
						align="center"
						label="代理代存"
						min-width="120"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									scope.row.assistDepositMultiple === 0
										? 0
										: scope.row.assistDepositMultiple || '-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="compensateMultiple"
						align="center"
						label="三方掉单补分"
						min-width="120"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									scope.row.compensateMultiple === 0
										? 0
										: scope.row.compensateMultiple || '-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="upScoreMultiple"
						align="center"
						label="代理给会员上分"
						min-width="110"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									scope.row.upScoreMultiple === 0
										? 0
										: scope.row.upScoreMultiple || '-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="rebateMultiple"
						align="center"
						label="会员返水"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									scope.row.rebateMultiple === 0
										? 0
										: scope.row.rebateMultiple || '-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="otherRebateAddMultiple"
						align="center"
						label="其他返水增加额度"
						min-width="120"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									scope.row.otherRebateAddMultiple === 0
										? 0
										: scope.row.otherRebateAddMultiple ||
										  '-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="clubRebateAddMultiple"
						align="center"
						label="俱乐部增加调整"
						min-width="110"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									scope.row.clubRebateAddMultiple === 0
										? 0
										: scope.row.clubRebateAddMultiple || '-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="insuranceRebateAddMultiple"
						align="center"
						label="保险返水增加调整"
						min-width="120"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									scope.row.insuranceRebateAddMultiple === 0
										? 0
										: scope.row
												.insuranceRebateAddMultiple ||
										  '-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="loanMultiple"
						align="center"
						label="信用借款"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									scope.row.loanMultiple === 0
										? 0
										: scope.row.loanMultiple || '-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="creator"
						align="center"
						label="创建人"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.creator || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="createdAt"
						align="center"
						label="创建时间"
						min-width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.createdAt || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="operator"
						align="center"
						label="最后操作人"
						min-width="100"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.operator || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="updatedAt"
						align="center"
						label="最后操作时间"
						min-width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.updatedAt || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						fixed="right"
						align="center"
						label="操作"
						min-width="200"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<el-button
								type="text"
								@click="handleEdit(scope.row)"
								v-if="hasPermission('403031')"
							>
								编辑
							</el-button>
							<el-button
								v-if="
									scope.row.username !== '默认' &&
									hasPermission('90750057')
								"
								type="text"
								@click="handleDel(scope.row)"
							>
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					v-show="!!total"
					class="pageValue"
					:current-page.sync="pageNum"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</template>
		</main-content>
		<el-dialog
			:title="ruleFormType === 'add' ? '新增' : '编辑'"
			:visible.sync="dialogRuleFormVisible"
			width="500px"
			:close-on-click-modal="false"
			@close="handleCloseRuleFormDialog('ruleForm')"
		>
			<el-form
				:model="ruleForm"
				v-loading="ruleFormLoading"
				:rules="rules"
				ref="ruleForm"
				label-width="auto"
				class="demo-ruleForm"
			>
				<div v-if="isDefault">
					<el-form-item label="默认" required></el-form-item>
				</div>
				<div v-if="isDefault">
					<el-form-item label="所属商户" required>
						<merchant-select
							v-model="ruleForm.merchantId"
							clearable
							:disabled="ruleFormType === 'edit'"
							:placeholder="$t('common.please_choose')"
							class="input-class"
						></merchant-select>
					</el-form-item>
				</div>
				<div v-else>
					<el-form-item label="所属商户:" prop="merchantId">
						<merchant-select
							v-model="ruleForm.merchantId"
							clearable
							:disabled="ruleFormType === 'edit'"
							:placeholder="$t('common.please_choose')"
							class="input-class"
						></merchant-select>
					</el-form-item>
					<el-form-item label="会员账号:" prop="username">
						<el-input
							v-model.trim="ruleForm.username"
							placeholder="请输入"
							:disabled="ruleFormType === 'edit'"
							clearable
							class="input-class"
							@blur="getMemberInfo"
						/>
					</el-form-item>
					<el-form-item :label="$t('common.business_model') + ':'">
						<el-input
							:value="businessModelMap[businessModel] || '-'"
							class="input-class"
							disabled
						></el-input>
					</el-form-item>
				</div>

				<el-form-item
					label="会员存款（客户端）:"
					prop="depositMultiple"
				>
					<el-input
						v-model.trim="ruleForm.depositMultiple"
						placeholder="请输入"
						maxlength="5"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
					<span>倍</span>
				</el-form-item>
				<el-form-item
					label="会员存款（后台）:"
					prop="depositBackMultiple"
				>
					<el-input
						v-model.trim="ruleForm.depositBackMultiple"
						placeholder="请输入"
						maxlength="5"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
					<span>倍</span>
				</el-form-item>
				<el-form-item label="代理代存:" prop="assistDepositMultiple">
					<el-input
						v-model.trim="ruleForm.assistDepositMultiple"
						placeholder="请输入"
						maxlength="5"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
					<span>倍</span>
				</el-form-item>
				<el-form-item label="三方掉单补分:" prop="compensateMultiple">
					<el-input
						v-model.trim="ruleForm.compensateMultiple"
						placeholder="请输入"
						maxlength="5"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
					<span>倍</span>
				</el-form-item>

				<el-form-item label="代理给会员上分:" prop="upScoreMultiple">
					<el-input
						v-model.trim="ruleForm.upScoreMultiple"
						placeholder="请输入"
						maxlength="5"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
					<span>倍</span>
				</el-form-item>
				<el-form-item label="会员返水:" prop="rebateMultiple">
					<el-input
						v-model.trim="ruleForm.rebateMultiple"
						placeholder="请输入"
						maxlength="5"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
					<span>倍</span>
				</el-form-item>
				<el-form-item
					label="其他返水增加额度:"
					prop="otherRebateAddMultiple"
				>
					<el-input
						v-model.trim="ruleForm.otherRebateAddMultiple"
						placeholder="请输入"
						maxlength="5"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
					<span>倍</span>
				</el-form-item>
				<el-form-item
					label="俱乐部增加调整:"
					prop="clubRebateAddMultiple"
				>
					<el-input
						v-model.trim="ruleForm.clubRebateAddMultiple"
						placeholder="请输入"
						maxlength="5"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
					<span>倍</span>
				</el-form-item>
				<el-form-item
					label="保险返水增加调整:"
					prop="insuranceRebateAddMultiple"
				>
					<el-input
						v-model.trim="ruleForm.insuranceRebateAddMultiple"
						placeholder="请输入"
						maxlength="5"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
					<span>倍</span>
				</el-form-item>
				<el-form-item label="信用借款:" prop="loanMultiple">
					<el-input
						v-model.trim="ruleForm.loanMultiple"
						placeholder="请输入"
						maxlength="5"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
					<span>倍</span>
				</el-form-item>
				<el-form-item>
					<el-button
						type="default"
						@click="handleCloseRuleFormDialog('ruleForm')"
					>
						取消
					</el-button>
					<el-button
						type="primary"
						:loading="submitLoading"
						@click="submitForm('ruleForm')"
					>
						确定
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<GoogleKeyInput
			:isShowdialog="isShowdialog"
			@getGoogleKey="getGoogleKey($event)"
			@backPrevStep="backPrevStep()"
		></GoogleKeyInput>
	</div>
</template>

<script>
import MainContent from '@/components/MainContent/index.vue'
import list from '@/mixins/list'
export default {
  components: {
    MainContent,
    GoogleKeyInput: () => import('@/components/GoogleKeyInput')
  },
  mixins: [list],
  data() {
    return {
      isDefault: false,
      merchantId: '',
      tableHeight: 480,
      otherDependenComponents: [],
      form: {
        merchantId: '',
        username: ''
      },
      loading: false,
      submitLoading: false,
      ruleFormLoading: false,
      tableData: [],
      dialogRuleFormVisible: false,
      id: '',
      ruleFormType: '',
      ruleForm: {
        username: '',
        merchantId: '',
        depositMultiple: undefined,
        depositBackMultiple: undefined,
        upScoreMultiple: undefined,
        rebateMultiple: undefined,
        otherRebateAddMultiple: undefined,
        clubRebateAddMultiple: undefined,
        loanMultiple: undefined,
        insuranceRebateAddMultiple: undefined,
        assistDepositMultiple: undefined,
        compensateMultiple: undefined
      },
      rules: {
        username: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        merchantId: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        depositMultiple: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        depositBackMultiple: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        upScoreMultiple: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        rebateMultiple: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        otherRebateAddMultiple: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        clubRebateAddMultiple: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        loanMultiple: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        insuranceRebateAddMultiple: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        assistDepositMultiple: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        compensateMultiple: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      isShowdialog: false,
      total: 0,
      businessModelMap: {
        1: '现金模式',
        2: '信用模式'
      },
      businessModel: ''
    }
  },
  methods: {
    getMemberInfo() {
      if (!this.ruleForm.username) return
      const params = {
        merchantId: this.ruleForm.merchantId,
        username: this.ruleForm.username
      }
      this.$api
        .paymentChannelConfigGetMember(params)
        .then(async (res) => {
          if (res.data) {
            this.businessModel = res.data.businessModel
          } else {
            this.$message.error(this.$t('agent.rule_account_tip'))
          }
        })
        .catch(() => {
          this.businessModel = ''
        })
    },
    search() {
      this.pageNum = 1
      this.loadData()
    },
    reset() {
      this.form = {}
      this.pageNum = 1
      this.pageSize = 100
      this.loadData()
    },
    loadData() {
      this.loading = true
      const params = {
        ...this.form,
        ...this.getParams()
      }
      this.$api
        .getMemberBillConfig(params)
        .then((res) => {
          this.tableData = res.data.record || []
          this.total = res.data.totalRecord
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    handleAdd() {
      this.resetForm('ruleForm')
      this.ruleFormType = 'add'
      this.isDefault = false
      this.dialogRuleFormVisible = true
    },
    handleEdit(val) {
      this.dialogRuleFormVisible = true
      this.resetForm('ruleForm')
      this.ruleFormType = 'edit'
      if (val.username === '默认') {
        this.isDefault = true
      } else {
        this.isDefault = false
      }
      this.merchantId = val.merchantId
      this.id = val.id
      this.ruleFormLoading = true
      this.$api
        .queryMemberBillConfig({
          id: this.id
        })
        .then((res) => {
          this.ruleForm = {
            username: res.data.username,
            merchantId: res.data.merchantId,
            depositMultiple: res.data.depositMultiple,
            depositBackMultiple: res.data.depositBackMultiple,
            upScoreMultiple: res.data.upScoreMultiple,
            rebateMultiple: res.data.rebateMultiple,
            otherRebateAddMultiple: res.data.otherRebateAddMultiple,
            clubRebateAddMultiple: res.data.clubRebateAddMultiple,
            loanMultiple: res.data.loanMultiple,
            insuranceRebateAddMultiple: res.data.insuranceRebateAddMultiple,
            assistDepositMultiple: res.data.assistDepositMultiple,
            compensateMultiple: res.data.compensateMultiple
          }
          this.businessModel = res.data.businessModel
          this.ruleFormLoading = false
        })
        .catch((e) => {
          this.ruleFormLoading = false
        })
    },
    handleDel(val) {
      this.ruleFormType = 'del'
      this.id = val.id
      this.isShowdialog = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isShowdialog = true
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getGoogleKey(data) {
      this.isShowdialog = false
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      if (this.ruleFormType === 'add') {
        const params = {
          depositMultiple: this.ruleForm.depositMultiple,
          depositBackMultiple: this.ruleForm.depositBackMultiple,
          upScoreMultiple: this.ruleForm.upScoreMultiple,
          rebateMultiple: this.ruleForm.rebateMultiple,
          otherRebateAddMultiple: this.ruleForm
            .otherRebateAddMultiple,
          clubRebateAddMultiple: this.ruleForm.clubRebateAddMultiple,
          insuranceRebateAddMultiple: this.ruleForm
            .insuranceRebateAddMultiple,
          loanMultiple: this.ruleForm.loanMultiple,
          googleVerifyCode: data,
          username: this.ruleForm.username,
          merchantId: this.ruleForm.merchantId,
          assistDepositMultiple: this.ruleForm.assistDepositMultiple,
          compensateMultiple: this.ruleForm.compensateMultiple
        }
        this.submitLoading = true
        this.$api
          .addMemberBillConfig(params)
          .then((res) => {
            this.$message({
              type: 'success',
              message: '新增成功!'
            })
            this.submitLoading = false
            this.dialogRuleFormVisible = false
            loading.close()
            this.loadData()
          })
          .catch((e) => {
            loading.close()
            this.submitLoading = false
          })
      } else if (this.ruleFormType === 'edit') {
        const params = {
          depositMultiple: this.ruleForm.depositMultiple,
          depositBackMultiple: this.ruleForm.depositBackMultiple,
          upScoreMultiple: this.ruleForm.upScoreMultiple,
          rebateMultiple: this.ruleForm.rebateMultiple,
          otherRebateAddMultiple: this.ruleForm
            .otherRebateAddMultiple,
          clubRebateAddMultiple: this.ruleForm.clubRebateAddMultiple,
          insuranceRebateAddMultiple: this.ruleForm
            .insuranceRebateAddMultiple,
          loanMultiple: this.ruleForm.loanMultiple,
          googleVerifyCode: data,
          id: this.id,
          assistDepositMultiple: this.ruleForm.assistDepositMultiple,
          compensateMultiple: this.ruleForm.compensateMultiple
        }
        this.submitLoading = true
        this.$api
          .updateMemberBillConfig(params)
          .then((res) => {
            this.submitLoading = false
            loading.close()
            this.$message({
              type: 'success',
              message: '编辑成功!'
            })
            this.dialogRuleFormVisible = false
            this.loadData()
          })
          .catch((e) => {
            loading.close()
            this.submitLoading = false
          })
      } else if (this.ruleFormType === 'del') {
        this.$api
          .deleteMemberBillConfig({
            id: this.id,
            googleVerifyCode: data
          })
          .then((res) => {
            loading.close()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.loadData()
          })
          .catch((e) => {
            loading.close()
          })
      }
    },
    backPrevStep() {
      this.isShowdialog = false
    },
    resetForm(formName) {
      this.ruleForm = {
        username: '',
        merchantId: '',
        depositMultiple: undefined,
        depositBackMultiple: undefined,
        upScoreMultiple: undefined,
        rebateMultiple: undefined,
        otherRebateAddMultiple: undefined,
        clubRebateAddMultiple: undefined,
        loanMultiple: undefined,
        insuranceRebateAddMultiple: undefined,
        assistDepositMultiple: undefined,
        compensateMultiple: undefined
      }
      this.businessModel = ''
    },
    handleCloseRuleFormDialog(formName) {
      this.dialogRuleFormVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.input-class {
	width: 180px;
}
::v-deep.el-input-number .el-input__inner {
	text-align: left;
}
</style>
